<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.ad{position: relative;
			margin: 100px auto;
				width: 700px;
				height: 400px;
				background:url('img/OIP-C.jpg') no-repeat center/100% 100%;
				
			}
			.ad .close{
				position: absolute;
				top: 2px;
				right: 2px;
				width: 20px;
				height: px;
				border: 1px solid ;
				font-size: 32px;
			}
		</style>
	</head>
	<body>
		<div class='ad'></div>
		<div class='ad'></div>
		<div class="ad">
			
			<div class="close">x	
			</div>
		</div>
		<button>新增</button>
		<ul>
			
		</ul>
	</body>
	<script>
		let a=document.querySelectorAll('.ad');
		let list=a[1].previousElementSibling;
	</script>
	<script>
		
		let cl=document.querySelector('.close');//获取close关闭元素节点
		let ad=document.querySelectorAll('.ad');//获取ad元素节点
		//给关闭按钮添加监听事件
		cl.addEventListener('click',function(){
			//事件处理程序
			cl.parentElement.style.display='none';
			ad[2].style.display='none';
		});
		console.log('---------------');
		console.log(cl.parentNode);//打印父节点
		console.log('---------------');
		console.log(ad);
		console.log(ad[0].children);
		console.log(ad[0].childNodes);
		console.log(cl.previousElementSibling);
		console.log(cl.nextElementSibling);
	</script>
	<script>
		let addEm=document.createElement('li');
		let btn =document.querySelector('button');
		btn.addEventListener('click',function(evt){
			
			btn.nextElementSibling.appendChild(addEm);
			addEm.innerText='这是新增的';
			evt.stopPropagation();
		});
	</script>
</html>
